<template>
  <div class="">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      style="margin-left: 20px; margin-top: 10px"
    >
      <el-form-item label="计划名称" prop="planName">
        <el-input
          v-model="queryParams.planName"
          placeholder="请输入计划名称"
          clearable
          size="small"
          style="width: 220px"
         
        />
      </el-form-item>
      <el-form-item label="计划部门" prop="planDept">
        <el-input
          v-model="queryParams.planDept"
          placeholder="请输入计划部门"
          clearable
          size="small"
          style="width: 220px"

        />
      </el-form-item>
      <el-form-item
        label="执行计划时间"
        label-width="100px"
      >
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button size="mini" @click="resetForms('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row style="margin-top: -8px; margin-left: 15px">
    </el-row>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 98%; margin-top: 5px; margin-left: 15px"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="planName" label="计划名称" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="计划执行人" align="center">
      </el-table-column>
      <el-table-column prop="planDept" label="计划部门" align="center">
      </el-table-column>
      <el-table-column
        prop="planBeginTime"
        label="计划时间"
        width="200"
        align="center"
      >
      <template slot-scope="scope">
        <span>{{scope.row.planBeginTime}}</span>
        <span>~</span>
        <span>{{scope.row.planEndTime}}</span>
      </template>
      </el-table-column>
      <el-table-column prop="planEvaluate" label="评定分数类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.planEvaluate == 0">十分制</span>
          <span v-else-if="scope.row.planEvaluate == 1">百分制</span>
          <span v-else-if="scope.row.planEvaluate == 2">优良差</span>
        </template>
      </el-table-column>
      <el-table-column prop="doneRatio" label="完成情况" align="center">
        <template slot-scope="scope">{{ scope.row.doneRatio + "%" }}
          
        </template>
      </el-table-column>
      <el-table-column prop="evaluateResult" label="评定结果" align="center">
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="modify(scope.row)"
            type="success"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="float: right; margin-right: 20px; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="total"
    >
    </el-pagination> 

    <el-dialog
      title="完成情况修改"
      :visible.sync="dialogVisible"
      width="39%"
      @close="resetForm('form1')"
    >
      <el-form :model="form1" :rules="rules1" ref="form1">
        <el-row>
          <el-col :span="10">
            <el-form-item label="计划名称" label-width="80px">
              <el-input
                v-model="form1.planName"
                placeholder="请输入计划名称"
                style="width: 120px"
                size="small"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成情况"  label-width="80px" prop="doneRatio">
              <el-input
                v-model="form1.doneRatio"
                placeholder="请输入完成情况"
                style="width: 200px"
                size="small"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <el-form-item label="描述计划" label-width="80px">
              <span
                >中小学生综合素质评价不再是简单的"优良差"等级评价,而是采取过程描述的方式来记录学生个体的发展情况</span
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine('form1')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  findPersonPlanPageList,
  updateDept,
} from "@/api/workflow/personalwork";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      dateRange: [],
      total: 0,
      loading: true,
      dialogVisible: false,
      form1: {
        doneRatio: "",
      },

      query: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams: {
        planName: "",
        planDept: "",
        planBeginTime: "",
        planEndTime:'',
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      rules1: {
        doneRatio: [
          { required: true, message: "请输入完成情况" },
          {
            pattern: /(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^100$)/,
            message: "请输入0-100之间的范围",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    shijianc(time) {
      let date = new Date(time)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    //重置按钮
    resetForms(queryForm) {
      this.dateRange = [];
      this.$refs[queryForm].resetFields();
      this.getData();
      this.handleQuery();
    },
    /** 提交按钮 */
    determine() {
      this.$refs["form1"].validate((valid) => {
        if (valid) {
          if (this.form1.id != null) {
            updateDept(this.form1).then((response) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.getData();
            });
          }
        }
      });
    },
    modify(row) {
      this.dialogVisible = true;
      this.form1 = row;
      console.log(this.form1);
    },
    handleSizeChange(size) {
      this.queryParams.pageSize = size;
      this.getData();
    },
    handleCurrentChange(num) {
      this.queryParams.pageNum = num;
      this.getData();
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
     if(this.dateRange.length==2){
      this.queryParams.planBeginTime=this.dateRange[0];
      this.queryParams.planEndTime=this.dateRange[1];
      
    }
      this.getData();
    },
    getData() {
      this.loading = true;
      findPersonPlanPageList(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          console.log(response, "123");
          this.tableData = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
      console.log(this.tableData, "1");
    },
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
</style>
